<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      xmlns:gdmt="">
<head>
    <div th:replace="common/common::html"></div>
    <meta charset="UTF-8">
    <title></title>

    <script th:inline="javascript" >
        var _gridWidth;
        var _gridHeight;
        var leftMenuSetting = {
            check: {
                enable: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback : {
            }
        };

        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;/*  -189 是去掉左侧 菜单的宽度，   -12 是防止浏览器缩小页面 出现滚动条 恢复页面时  折行的问题 */
            _gridHeight = $(document).height()-32-60; /* -32 顶部主菜单高度，   -90 查询条件高度*/
            $("body").css("height",_gridHeight+"px")
        }
        function leftMenuLoad() {
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/ptDuty/getDutyZtreeList}]]*/'',
                    data: [],
                    success: function (data) {
                        console.log(data)
                        $.fn.zTree.init($("#menu-left-tree-ul-id"), leftMenuSetting, data);
                        let select = document.getElementById('add-organ-select');
                        data.forEach(a=>(
                            select.add(new Option(a.name,a.id))
                        ) )
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
        // function onClickNode(event, treeId, treeNode){
        //     console.log(treeId);
        //     console.log(treeNode);
        //     $("#flexigrid-id").flexOptions({
        //         extParam:[
        //             {name:"searchOrganName",value:treeNode.name}
        //         ]
        //     }).flexReload();
        // }

        $(function () {
            leftMenuLoad();
            resizePageSize();
            var _columnWidth = _gridWidth/4;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/organ/getOrganInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'organUuid',name : 'organUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{organ.name}]]*/"",name : 'organName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : '',width : _columnWidth, sortable : true,align : 'center',process:function (y, _trid, _row) {
                            var htmlContent = '<a href="#" onclick="delBtn( \''+ _row.dutyid+ '\')"><i class="glyphicon glyphicon-minus" style="color: #2f332a"></i></a>';
                            return htmlContent;
                        }}
                ],
                resizable : false, //resizable table是否可伸缩
                useRp : true,
                usepager : true, //是否分页
                autoload : false, //自动加载，即第一次发起ajax请求
                hideOnSubmit : true, //是否在回调时显示遮盖
                showcheckbox : true, //是否显示多选框
                //rowhandler : rowDbclick, //是否启用行的扩展事情功能,在生成行时绑定事件，如双击，右键等
                rowbinddata : true

            });
            queryBtn();
            //点击查询功能
            $('#query-btn-id').click(function (event){
                event.stopPropagation();//防止冒泡
                queryBtn();
            })
            $('#add-btn-id').click(function (event){
                addBtn();
            })
            $('#deletes-btn-id').click(function (event){
                var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(1);
                ids.forEach(id=>{
                    delBtn(id);
                })
            })
            $('#bind-btn-id').click(function (event){
                bindBtn();
            })
            $('#unbind-btn-id').click(function (event){
                unbindBtn();
            })
        });//ready


        function queryBtn() {//岗位表格的查询
            var searchDutyName = $("#search-duty-name-id").val();
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"searchDutyName",value:searchDutyName}
                ]
            }).flexReload();

        }

        function addBtn() {//岗位表格的增加
            var addDutyName = $("#add-duty-name-id").val();
            var addOrganUUID = $("#add-organ-select").val();
            // console.log(addDutyName)
            // console.log(addOrganUUID)
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/ptDuty/insertNewPt}]]*/'',
                    data: {name:addDutyName,
                        organUuid:addOrganUUID
                    },
                    success: function (data) {
                        alert("成功");
                        $("#flexigrid-id").flexOptions({
                        }).flexReload();
                        $("#add-duty-name-id").val('');
                        $("#add-organ-select").val('');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }

        function delBtn(date) {//岗位表格的删除
            console.log(date);
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/ptDuty/deleteDutyById}]]*/'',
                    data:{dutyidlist:date},
                    success: function (data) {
                        alert("成功");
                        $("#flexigrid-id").flexOptions({
                        }).flexReload();
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }


        function allocateZtree() {
            //获取Uuid
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            if(ids.length !== 1){
                message(/*[[#{common.select.one}]]*/'');
                return;
            }

            $("#allocate-dialog-id").attr("userUUid",ids);
            //
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{getRoleZtreeListByUserId}]]*/'',
                    data: [{name:"userUuid",value:ids}],
                    success: function (data) {
                        $.fn.zTree.init($("#allocate-user-ztree"), allocateSetting, data);
                        $("#allocate-dialog-id").dialog('open');
                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
        function bindBtn() {
            var organUuid = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            var parentUuid = $("#add-organ-select").val();
            console.log(organUuid);
            console.log(parentUuid);
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/organ/bindOrganStructure}]]*/'',
                    data: [{name: "organUuid", value: organUuid},
                        {name: "parentUuid", value: parentUuid}
                    ],
                    success: function (data) {
                        alert("成功");

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }
        function unbindBtn() {
            var organUuid = $("#flexigrid-id").getFlexigridiAttrByIndex(0);
            var parentUuid = $("#add-organ-select").val();
            console.log(organUuid);
            console.log(parentUuid);
            $.ajax({
                    type: 'post',
                    async: false,
                    dataType : 'json',
                    url: /*[[@{/organ/unbindOrganStructure}]]*/'',
                    data: [{name: "organUuid", value: organUuid},
                        {name: "parentUuid", value: parentUuid}
                    ],
                    success: function (data) {
                        alert("成功");

                    },
                    error: function(msg){
                        message(/*[[#{common.error}]]*/'');
                    }
                }
            );
        }


    </script>
</head>
<body>
<div>
    <span></span>
    <a href="#" id="query-btn-id" class="navbar-btn">
        <input type="text" id="search-duty-name-id" th:placeholder="#{organ.name}">
        <i class="glyphicon glyphicon-zoom-in"></i>
        <span th:text="#{common.query}" ></span>
    </a>
    <a href="#" id="add-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-plus"></i>
        <span th:text="#{common.add}"></span>
    </a>
    <a href="#" id="modify-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-wrench"></i>
        <span th:text="#{common.modify}"></span>
    </a>
    <a href="#" id="deletes-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-trash"></i>
        <span th:text="#{common.delete}"></span>
    </a>
    <a href="#" id="bind-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{organ.bind}"></span>
    </a>
    <a href="#" id="unbind-btn-id" class="navbar-btn">
        <i class="glyphicon glyphicon-tower"></i>
        <span th:text="#{organ.unbind}"></span>
    </a>
    <select id="add-organ-select" th:placeholder="#{organ.name}" >
        <option value="" disabled selected hidden>请选择父组织</option>
    </select>
</div>
<div style="display:flex">
    <div>
        <nav>

            <ul id="menu-left-tree-ul-id" class="ztree" ></ul>
        </nav>

    </div>

    <table id="flexigrid-id"></table>

</div>
</body>
</html>
